<template>
  <div class="menu">
    <div class="menu-bodey">
      <div class="menu-title">
        <span>重置密码</span>
      </div>
      <el-form
        ref="resetRef"
        :rules="resetRules"
        center
        :model="reset"
        :label-width="100"
      >
        <el-form-item label="手机号:" prop="phone">
          <el-input maxlength="11" v-model="reset.phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="code">
          <el-input style="width: 70%" v-model="reset.code"></el-input>
          <div class="code" @click="refreshCode">
            <SIdentify :identifyCode="identifyCode"></SIdentify>
          </div>
        </el-form-item>
        <el-form-item label="短信验证码:" prop="checkCode">
          <el-input style="width: 70%" v-model="reset.checkCode"></el-input>
          <div style="margin-left: 5%">
            <el-button type="primary">获取验证码</el-button>
          </div>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" v-model="reset.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="confirmPassword">
          <el-input type="password" v-model="reset.confirmPassword"></el-input>
        </el-form-item>
      </el-form>

      <div class="menu-bottom">
        <el-button
          style="cursor: pointer"
          type="primary"
          @click="changePw(resetRef, formEl)"
          >确定</el-button
        >
        <el-button @click="cancel()">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { reset } from "../api/resetPw";
import router from "../router";
import SIdentify from "../components/identify/Sidentify.vue";
import { ElMessage } from "element-plus";
import { md5 } from 'js-md5'; // 引

export default {
  components: { SIdentify },
  setup() {
    // 修改密码是否一致
    const checkPwd = (rule, value, callback) => {
      if (value !== data.reset.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };

    let data = reactive({
      identifyCode: "", //图形验证码
      identifyCodes: "1234567890abcdefghijklmnopqrstuvwxyz", //验证码出现的数字和字母

      resetRef: "",
      reset: {
        phone: "",
        code: "", //输入框图形验证码
        checkCode: "",
        password: "",
        confirmPassword: "",
      },
      resetRules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        code: {
          required: true,
          message: "请输入验证码",
          trigger: "blur",
        },
        checkCode: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
        ],
        confirmPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
          { validator: checkPwd, trigger: "blur" },
        ],
      },
    });

    //重置密码的方法
    let changePw = (formEl) => {
      if (!formEl) return;
      formEl.validate((valid, fileds) => {
        if (valid) {
          //判断图形验证码是否一致
          try {
            if (data.identifyCode !== data.reset.code) {
              throw "图形验证码不一致";
            }
            var md5Password=md5(data.reset.password + data.reset.phone)
            let params = {
              phone: data.reset.phone,
              checkCode: data.reset.checkCode,
              password: md5Password,
            };
            reset(params).then((res) => {
              if (res.code == 1) {
                router.push({ name: "login" });
              }
            });
          } catch (err) {
            ElMessage.warning({ message: err });
          }
        }
      });
    };

    //取消按钮，回到登录界面
    const cancel = () => {
      router.push({ name: "login" });
    };

    onMounted(() => {
      data.identifyCode = "";
      makeCode(data.identifyCodes, 4);
    });

    // 生成随机数
    const randomNum = (min, max) => {
      max = max + 1;
      let a = Math.floor(Math.random() * (max - min) + min);
      console.log("a" + a);
      return a;
    };
    // 更新验证码
    const refreshCode = () => {
      data.identifyCode = "";
      makeCode(data.identifyCodes, 4);
      // console.log( data.identifyCode)
    };

    // 随机生成验证码字符串
    const makeCode = (o, l) => {
      for (let i = 0; i < l; i++) {
        data.identifyCode +=
          data.identifyCodes[
            Math.floor(Math.random() * (data.identifyCodes.length - 0) + 0)
          ];
      }
    };

    return {
      ...toRefs(data),
      changePw,
      refreshCode,
      cancel,
    };
  },
};
</script>

<style>
.menu {
  width: 50%;
  margin: 5% 25%;
  background-color: hsla(0, 0%, 100%, 0.9);
  border-radius: 4px;
}

.menu-title {
  padding-bottom: 30px;
  border-radius: 1px solid red;
  font-weight: 800;
  font-size: 24px;
  color: #1a3f81;
}

.menu-bodey {
  text-align: center;
  padding: 50px 50px;
  width: 60%;
  margin: 0 calc((40% - 100px) / 2);
  text-align: center;
}
.el-form-item__error {
  font-size: 14px !important;
  left: 2%;
}
.el-form-item {
  margin-bottom: 24px;
}

.code {
  text-align: center;
  margin-left: 10%;
}
</style>